<template>
	<view>
		<view class="skillauth z-padding-32">
			<view class="z-flex-y-c">
				<image class="avatar" :src="cdn(info.image)"></image>
				<view class="z-font-40 z-margin-t-24 z-margin-b-16">{{ info.name }}</view>
				<view class="z-font-26 text_666">{{ info.idcard }}</view>
			</view>
			<view class="z-font-26 z-margin-t-72 z-margin-b-32">从业资格证照片</view>
			<canvas id="canvas-box" class="licence" type="2d":style="'width:' + canvasW + 'px' + 'height:' + canvasH + 'px'"></canvas>
			
			<view class="z-font-26 z-margin-t-48 z-margin-b-32">健康证照片</view>
			<canvas id="canvas-box1" class="licence" type="2d" :style="'width:' + canvasW1 + 'px' + 'height:' + canvasH1 + 'px'"></canvas>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';

export default {
	data() {
		return {
			info: '',
			skill_id: '',
			canvasW: '',
			canvasH: '',
			canvasW1: '',
			canvasH1: ''
		};
	},
	onLoad(options) {
		this.skill_id = options.skill_id;
		this.getInfo();
	},
	methods: {
		getInfo() {
			http.get('skill/getsampleskill', {
				id: this.skill_id
			}).then((res) => {
				(this.info = res.data), this.addWaterMark(this.util.cdn(res.data.health_image), '#canvas-box');
				this.addWaterMark(this.util.cdn(res.data.certificate_image), '#canvas-box1');
			});
		},
		addWaterMark(url, view) {
			let that = this;
			uni.getImageInfo({
				src: url,
				success: (response) => {
					const imgW = response.width;
					const imgH = response.height;
					const SelectorQuery = uni.createSelectorQuery().in(that);
					SelectorQuery.select(view).fields({
						node: true,
						size: true
					});
					SelectorQuery.exec((res) => {
						console.log(res,'>>?????')
						const canvasBox = res[0].node;
						const canvasW = res[0].width;
						const canvasH = (imgH / imgW) * res[0].width;
						if (view == '#canvas-box') {
							this.canvasW = canvasW
							this.canvasH = canvasH
						} else {
							this.canvasW1 = canvasW
							this.canvasH1 = canvasH
						}

						const ctx = canvasBox.getContext('2d');
						const dpr = uni.getSystemInfoSync().pixelRatio;
						canvasBox.width = canvasW * dpr;
						canvasBox.height = canvasH * dpr;
						ctx.scale(dpr, dpr);
						const img = canvasBox.createImage();
						img.src = url;
						img.onload = () => {
							ctx.clearRect(0, 0, canvasW, canvasH);
							ctx.drawImage(img, 0, 0, canvasW, canvasH);
							let watermark = uni.getStorageSync('config').user_name || 'AJAX家政';
							let fontColor = '#ffffff';
							let fontSize = 12;
							let lineHeight = 30;
							let watermarkWidth = watermark.length * 12;
							let maxLength = canvasH > canvasW ? canvasH * 2 : canvasW;
							ctx.save();
							ctx.beginPath();
							ctx.translate(canvasW / 2, -maxLength);
							ctx.rotate((45 * Math.PI) / 180);
							let xNum = Math.ceil((maxLength * 2) / watermarkWidth);
							let yNum = Math.ceil((maxLength * 2) / lineHeight);
							for (let j = 0; j < yNum; j++) {
								ctx.fillStyle = fontColor;
								ctx.font = `${fontSize}px serif`;
								ctx.fillText(watermark, 0, lineHeight * j);
								for (let i = 1; i < xNum; i++) {
									ctx.fillStyle = fontColor;
									ctx.font = `${fontSize}px serif`;
									ctx.fillText(watermark, watermarkWidth * i, lineHeight * j);
								}
							}
							ctx.closePath();
							ctx.restore();
						};
					});
				},
				fail: (e) => {
					console.log(e);
				}
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.avatar {
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
}

.licence {
	width: 400rpx;
}
</style>
